<template>
  <div
    ref="div"
    class="ys-float-btn"
    :style="{
      width: itemWidth + 'px',
      height: itemHeight + 'px',
      left: left + 'px',
      top: top + 'px'
    }"
    @click="onBtnClicked"
  >
    <slot name="icon" />
    <!-- <img v-if="icon === 1" class="su_img" src="../assets/images/qq.png"> -->
    <!-- <img v-if="icon === 2" class="su_img" src="../assets/images/weibo.png"> -->
  </div>
</template>

<script>
export default {
  name: 'FloatImgBtn',
  props: {
    itemWidth: {
      type: Number,
      default: 55
    },
    itemHeight: {
      type: Number,
      default: 55
    },
    gapWidth: {
      type: Number,
      default: 5
    },
    coefficientHeight: {
      type: Number,
      default: 0.8
    }
  },
  data() {
    return {
      timer: null,
      currentTop: 0,
      clientWidth: 0,
      clientHeight: 0,
      left: 0,
      top: 0
    }
  },
  created() {
    this.clientWidth = document.documentElement.clientWidth
    this.clientHeight = document.documentElement.clientHeight
    this.left = this.clientWidth - this.itemWidth - this.gapWidth
    this.top = this.clientHeight * this.coefficientHeight
  },
  mounted() {
    this.$nextTick(() => {
      const div = this.$refs.div
      div.addEventListener('touchstart', (e) => {
        e.stopPropagation()
        div.style.transition = 'none'
      })
      div.addEventListener(
        'touchmove',
        (e) => {
          e.stopPropagation()
          if (e.targetTouches.length === 1) {
            const touch = event.targetTouches[0]
            this.left = touch.clientX - this.itemWidth / 2
            this.top = touch.clientY - this.itemHeight / 2
          }
        },
        false
      )
      div.addEventListener('touchend', (e) => {
        e.stopPropagation()
        div.style.transition = 'all 0.3s'
        if (this.left > this.clientWidth / 2) {
          this.left = this.clientWidth - this.itemWidth - this.gapWidth
        } else {
          this.left = this.gapWidth
        }
        if (this.top <= 36) {
          this.top = 36 + this.gapWidth
        } else {
          const bottom =
            this.clientHeight - 50 - this.itemHeight - this.gapWidth
          console.log(bottom, this.top)
          if (this.top >= bottom) {
            this.top = bottom
          }
        }
      })
    })
  },

  methods: {
    onBtnClicked() {
      this.$emit('onFloatBtnClicked')
    }
  }
}
</script>

<style lang="scss" scoped>
.ys-float-btn {
  //   background: rgba(56, 181, 77, 1);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  color: #666666;
  z-index: 20;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  //   bottom: 20vw;

  img {
    padding: 5px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    // margin-bottom: 3px;
  }
}
.su_img {
  width: 40px;
  height: 40px;
  //   margin: 8px 0 0 0;
}
</style>
